import { useEffect, useState } from 'react'
import '../index.css'
import store from './store';
import ProfileSetting from './ProfileSetting'

export default function User() {
    return <>
        <p>
            常见需求：修改用户名 <br />
            用户名位于header中，个人设置页面修改后需要同步更新右上角的用户名
        </p>
        <h1>redux：store版本</h1>
        {/* <Header /> */}
        <Header1 />
        <Setting />
        <Summary />
    </>;
}

function Header() {
    const [flag, setFlag] = useState(false);
    useEffect(() => {
        // 一定得订阅，否则，store变化了，页面不会更新
        const unsubscribe = store.subscribe(() => {
            setFlag(!flag);
        })
        return () => {
            // 取消订阅
            unsubscribe();
        }
    }, [flag]);

    console.log("store.getState()", store.getState());

    return (
        <div className='header'>
            <span>{store.getState().username}</span>

            <span className='un-read'>
                未读
                <div className='un-read-num'>{store.getState().unReadCount}</div>
            </span>
        </div>
    )
}

function Setting(props) {
    return (
        <div className='setting'>
            设置页面：
            <ProfileSetting />
            其它设置 <br />
            消息通知设置...

        </div>
    );
}

function Summary() {
    return <p>
        总结： <br />
        优点：<br />
        1. redux的引入解决了props一层一层传递的麻烦 <br />
        缺点：<br />
        1. store.subscribe接受数据变化，需要手动取消订阅，而且容易出错，比如依赖[flag] <br />
        2. 任何的变化都会导致整个页面的更新，性能不好
    </p>
}


export function Header1() {
    // 只有这两个状态更新，才会render, 但是还是要去订阅，销毁订阅
    const [username, setUsername] = useState(store.getState().username);
    const [unReadCount, setUnReadCount] = useState(store.getState().unReadCount);
    useEffect(() => {
        const unsubscribe = store.subscribe(() => {
            console.log("update...");

            setUsername(store.getState().username);
            setUnReadCount(store.getState().unReadCount);
        })
        return () => {
            unsubscribe();
        }
    }, []);


    return (
        <div className='header'>
            <span>{username}</span>

            <span className='un-read'>
                未读
                <div className='un-read-num'>{unReadCount}</div>
            </span>
        </div>
    )
}